import CreateDisciplineForm from "@/features/create-discipline/ui/CreateDisciplineForm"
import { Modal, ModalBody, ModalContent, useDisclosure } from "@nextui-org/react"
import { Gltf, Html } from "@react-three/drei"
import { GroupProps } from "@react-three/fiber"
import { Select } from "@react-three/postprocessing"
import { useRouter } from "next/navigation"
import { useState } from "react"
import DisciplineModal from "./DisciplineModal"
import { useIsDisciplineCompleted } from "../model/useIsDisciplineCompleted"


export default function Discipline(props: GroupProps & { tittle: string, disciplineId: number }) {
    const source = '/assets/factory_outside.glb'
    const router = useRouter()
    const { isOpen, onOpenChange, onOpen } = useDisclosure()
    const isCompleted = useIsDisciplineCompleted(props.disciplineId)
    return (
        <group {...props}>
            <mesh>
                <Gltf
                    src={source}
                />
                <Html position={[-30, 10, -10]} className='' distanceFactor={100}>
                    {!isOpen &&
                        <div
                            onClick={onOpen}
                            className={isCompleted.completed
                                ? 'rounded-xl p-2 cursor-pointer bg-white border-4 border-green-500  text-green-500'
                                : 'rounded-md p-2 cursor-pointer bg-white  border-4 border-gray-300 hover:bg-gray-200'}
                        >
                            <p className='font-bold'>{props.tittle}</p>
                            {isCompleted.completed && <p>Выполнено!</p>}
                        </div>
                    }
                    <Modal
                        className='fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bottom-0 h-fit bg-white p-5 rounded-lg'
                        isOpen={isOpen}
                        onOpenChange={onOpenChange}
                    >
                        <ModalContent className='w-1/2'>
                            {(onClose) => (
                                <>
                                    <ModalBody className='p-5 items-center'>
                                        <div className='w-full ' >
                                            <DisciplineModal
                                                tittle={props.tittle}
                                                onBegin={() => router.push(`disciplines/${props.disciplineId}/`)}
                                                description="Описание дисциплины"
                                            />
                                        </div>
                                    </ModalBody>
                                </>
                            )}
                        </ModalContent>
                    </Modal>
                </Html>
            </mesh>
        </group >
    )
}